<template>
    <div class="form-btn-container">
        <n-data-table :single-line="false" :columns="columnsOption" :data="tableData" />
        <n-button class="btn-w100_" type="primary" @click="addRequireParame">添加参数</n-button>
        <br />
        <n-button class="btn-w100_" type="primary" @click="save">保存</n-button>
    </div>
</template>

<script setup>
import { h, defineProps, reactive, toRaw, ref, nextTick } from "vue";
import { NButton, NSelect, NInput } from "naive-ui";

const props = defineProps(["datas", "callBack", "close"]);
const tableData = reactive(props.datas);
const options = [
    {
        label: "字符类型",
        value: "String",
    },
    {
        label: "数值类型",
        value: "Number",
    },
    {
        label: "布尔类型",
        value: "Boolean",
    },
    {
        label: "对象",
        value: "Object",
    },
    {
        label: "数组",
        value: "Array",
    },
    {
        label: "箭头流",
        value: "ArrowFlow",
    },
];
const columnsOption = [
    {
        title: "字段",
        key: "name",
        align: "center",
        render(row, index) {
            return h(NInput, {
                value: row.name,
                size: "small",
                placeholder: "请输入",
                style: { width: "100px" },
                onUpdateValue(v) {
                    tableData[index].name = v;
                },
            });
        },
    },
    {
        title: "类型",
        key: "type",
        align: "center",
        render(row, index) {
            return h(NSelect, {
                value: row.type,
                options,
                size: "small",
                onUpdateValue: v => {
                    tableData[index].type = v;
                },
                style: {
                    width: "100px",
                },
            });
        },
    },
    {
        title: "操作",
        key: "caozuo",
        align: "center",
        render(row, index) {
            return h(
                NButton,
                {
                    type: "error",
                    ghost: true,
                    size: "small",
                    onclick: () => {
                        tableData.splice(index, 1);
                    },
                },
                { default: () => "删除" }
            );
        },
    },
];

function addRequireParame() {
    tableData.push({ name: "", type: "String" });
}
function save() {
    props.callBack(toRaw(tableData));
}
</script>

<style scoped lang="scss">
.form-btn-container {
    width: 400px;
    padding: 20px;

    .btn-w100_ {
        margin-top: 10px;
        width: 100%;
    }
}
</style>
